import React, { Component } from 'react'
import { Select } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import { Table, Input } from 'antd';
import './Leave.css'
// 时间组件导入
import type { DatePickerProps, } from 'antd';
import { DatePicker, Space } from 'antd';
import service from '../../../utils/service';
// 时间定义
const { Option } = Select;
interface DataType {
  department: any;
  name: any;
  start: any;
  end: any;
  types: any;
  time: any;
  sta: any;
  operation: any
  rove: any
  item: any
}

export default class Work extends Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      arr3: [],
      xqkq: '',
      ids: ''
    }
  }
  columns: ColumnsType<DataType> = [
    {
      title: '部门',
      dataIndex: 'bm',
      width: 120,
      align: 'center',

    },
    {
      title: '姓名',
      dataIndex: 'name',
      width: 120,
      align: 'center',
    },
    {
      title: '编号',
      dataIndex: 'id',
      width: 120,
      align: 'center',
    },
    {
      title: '实际出勤天数',
      dataIndex: 'cq',
      width: 120,
      align: 'center',
    },
    {
      title: '迟到次数',
      dataIndex: 'cd',
      width: 120,
      align: 'center',
    },
    {
      title: '早退次数',
      dataIndex: 'zt',
      width: 120,
      align: 'center',
    },
    {
      title: '缺卡次数',
      dataIndex: 'qk',
      width: 120,
      align: 'center',
    },
    {
      title: '外勤次数',
      dataIndex: 'wq',
      width: 120,
      align: 'center',
    },
    {
      title: '请假次数',
      dataIndex: 'qj',
      width: 120,
      align: 'center',
    },

  ];
  // 发请求获取tab表格数据
  componentDidMount(): void {
    service({
      url: '/statis'
    }).then(res => {
      this.setState({
        arr3: res.data,
      })
    })

  }
  // 重置
  rese = () => {
    service({
      url: '/statis'
    }).then(res => {
      this.setState({
        arr3: res.data,
      })
    })

  }
  // 查询 
  ser = () => {
    service({
      url: '/statis',
      params: {
        name: this.state.xqkq
      }
    }).then(res => {
      this.setState({
        arr3: res.data
      })
    })
  }
  render() {
    return (
      <div>
        <div className='box1'>
          <Input allowClear style={{ width: '142px', marginLeft: '20px', marginTop: '20px' }} placeholder="姓名" onChange={(e: any) => { this.setState({ xqkq: e.target.value }) }} />
          {/* 警告value和label内容不同 */}
          {/* {this.state.arr2.map((item: any) => <><Option value={item.id}>{item.year}{item.term}</Option></>)} */}
          <button className='cx' onClick={this.ser}>查 询</button>
          <button className='cz' onClick={this.rese}>重 置</button>
          <div className='sj' >
            <p className='sjwz'>查询结果：共计<span style={{ color: '#1890FF' }}> {this.state.arr3.length} </span>条数据</p>
          </div>
          <div style={{ marginTop: '20px' }}>
            <Table columns={this.columns} dataSource={this.state.arr3} pagination={{ pageSize: 10 }} scroll={{ y: 460 }} bordered={true} />
          </div>
        </div>

      </div>
    )
  }
}
